<template>
  <div class="service">
    <van-nav-bar
      @click="haandolClick()"
      title="樊登读书客服君为您服务"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <main>
      <p>今天&nbsp;&nbsp;{{ hour }}:{{ minu }}</p>
      <h5>
        <img src="https://z3.ax1x.com/2021/07/20/WtR5oF.png" alt="" /><span
          >容莉雅kk，您好</span
        >
      </h5>
      <div class="qie">
        <img src="https://z3.ax1x.com/2021/07/20/Wt58gJ.png" alt="" />
        <van-tabs v-model:active="activeName">
          <van-tab title="APP使用问题"
            ><ul>
              <li>~想了解樊登读书企业相关介绍？</li>
              <li>~樊登读书APP版本号在哪里看？</li>
              <li>~怎么下载/更新樊登读书APP？</li>
              <li>~在樊登APP内怎么找想听的书？</li>
            </ul></van-tab
          >
          <van-tab title="礼品卡问题"
            ><ul>
              <li>~想你的爷爷来了？？？？</li>
              <li>~想你的奶奶来了？？？？</li>
              <li>~想你的弟弟来了P？？？？</li>
              <li>~想你的哥哥来了？？？？</li>
            </ul></van-tab
          >
          <van-tab title="企读相关咨询"
            ><ul>
              <li>~你想咋地 咬我？？？？？？？</li>
              <li>~你想咋地 吃我？？？？？？？</li>
              <li>~你想咋地 弄我？？？？？？？</li>
              <li>~你想咋地 扁我？？？？？？？</li>
            </ul></van-tab
          >
        </van-tabs>
      </div>
      <div class="wo" v-for="item in arr" :key="item">
        <p class="ni">{{ item }}</p>
        <span><img :src="userimg" alt="" /></span>
      </div>
      <div class="anniu">
        <van-button type="default">爱心建议</van-button>
        <van-button type="default">修改手机号码？</van-button>
        <van-button type="default">商城订单查询？</van-button>
      </div>
    </main>
    <footer>
      <p>
        <span
          ><img src="https://z3.ax1x.com/2021/07/20/WNVvBd.png" alt=""
        /></span>
        <van-search v-model="text" @keydown.enter="skuNameSearch"> </van-search>
        <em><img src="https://z3.ax1x.com/2021/07/20/WNVxHA.png" alt="" /></em>
      </p>
    </footer>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { onBeforeMount } from "@vue/runtime-core";
import { postEditChaXunApi } from "../utils/loginapi";

export default {
  setup() {
    const token = localStorage.getItem("token");

    const userimg = ref("");
    onBeforeMount(() => {
      postEditChaXunApi({ usertel: token }).then((res) => {
        userimg.value = res.data.userimg;
      });
    });
    const router = useRouter();
    const activeName = ref(0);
    const arr = ref([]);
    const text = ref("");
    const skuNameSearch = (event) => {
      if (event.keyCode === 13) {
        if (text.value) {
          arr.value.push(text.value);
          text.value = "";
        }
      }
    };
    const haandolClick = () => {
      router.go(-1);
    };
    const onClickLeft = () => {};
    const now = new Date();
    var hour = now.getHours();
    var minu = now.getMinutes();
    return {
      onClickLeft,
      hour,
      minu,
      activeName,
      text,
      arr,
      skuNameSearch,
      haandolClick,
      token,

      userimg,
    };
  },
};
</script>

<style lang="less">
.service {
  .van-nav-bar__title {
    font-size: 14px;
    font-family: PingFangSC;
    font-weight: 900;
    color: #000000;
  }
  main {
    background: #ededed;
    height: 625px;
    overflow: auto;
    p {
      text-align: center;
      padding-top: 8px;
      font-size: 10px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #646464;
    }
    h5 {
      display: flex;
      align-items: center;
      height: 80px;
      span {
        width: 110px;
        height: 30px;
        align-items: center;
        margin-left: 5px;
        display: flex;
        background: #ffffff;
        border-radius: 5px;
      }
    }
    .qie {
      width: 95%;
      height: 230px;
      background: #ffffff;
      margin: auto;
      border-radius: 8px;
      img {
        border: 1px dashed lightgray;
        margin-left: 5px;
        margin-top: 5px;
      }
      .van-tab__text {
        font-size: 15px;
        font-family: PingFangSC;
        font-weight: 700;
        color: #333333;
      }
      // .van-tab__text--ellipsis {
      //   color: #3679ec;
      // }
      .van-tabs__line {
        width: 80px;
        background: #3679ec !important ;
      }
      .van-tab--active span {
        color: #3679ec !important;
      }
      ul {
        li {
          font-size: 10px;
          font-weight: 600;
          color: lightslategray;
          margin: 15px 30px;
        }
      }
    }

    .wo {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      margin-right: 15px;

      .ni {
        padding: 8px 8px;
        background: #ffffff;
        border-radius: 5px;
      }

      img {
        margin-left: 3px;
        width: 20px;
        height: 20px;
      }
    }
    .anniu {
      width: 100%;

      position: fixed;
      bottom: 70px;
      display: flex;
      justify-content: space-evenly;
      //
      .van-button {
        border-radius: 15px;
        height: 33px;
        font-size: 10px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #202020;
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0px;
    left: 0;
    height: 60px;
    width: 100%;
    background: #f6f6f6;

    .van-search {
      width: 80%;
      margin: auto;
      background: #f6f6f6;
      .van-cell {
        background: #ffffff;
        border-radius: 13px;
      }
      .van-icon {
        display: none;
      }
    }
    span {
      position: absolute;
      left: 6px;
      bottom: 15px;
    }
    em {
      position: absolute;
      right: 56px;
      bottom: 16px;
    }
  }
}
</style>
